<template>
	<view class="bills-card-layout" :class="[`bills-card-bg-${props.bg}`]" @tap="didSelect">
		<view class="bills-card-top">
			<text>{{props.title}}</text>
			<view class="bills-card-top-right">
				<text>查看</text>
				<xh-icon icon="icon_jiantou" color="#fff"></xh-icon>
			</view>
		</view>
		<view class="bills-card-money">{{props.money}}</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		//背景图片 red/green/blue
		bg:{
			type:String,
			default:'blue'
		},
		// 标题
		title:{
			type:String,
			default:'货款账单'
		},
		// 金额
		money:{
			type:Number,
			default:0
		}
	})
	const emits = defineEmits(['cellClick'])
	const didSelect = ()=>{
		emits('cellClick')
	}
</script>

<style lang="scss" scoped>
.bills-card-bg-red{
	background-image: url('/static/wallet/bill_bg_red.png');
}
.bills-card-bg-green{
	background-image: url('/static/wallet/bill_bg_green.png');
}
.bills-card-bg-blue{
	background-image: url('/static/wallet/bill_bg_blue.png');
}
.bills-card-layout{
	background-size: 100% 100%;
	background-repeat: no-repeat;
	padding: 30rpx;
	border-radius: 16rpx;
	.bills-card-top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;
		font-size: 30rpx;
		.bills-card-top-right{
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 26rpx;
		}
	}
	.bills-card-money{
		color: #fff;
		font-size: 48rpx;
		font-size: 600;
		margin-top: 16rpx;
	}
}
</style>